<template>
    <div>
        <div class="header">
            <el-row type="flex" class="row-bg" :gutter="20">
                <el-col :span="3">
                    <el-image :src="require('@/assets/1.jpg')"
                        style="display: flex; height: 100px ;width: 180px; padding-left: 150px; "></el-image>
                </el-col>
                <el-col :span="3">
                    <el-link type="primary" style="padding-left: 150px;" @click="show('Index')">首页</el-link>
                </el-col>
                <el-col :span="3">
                    <el-link type="primary" @click="show('About')" >关于我们</el-link>
                </el-col>
                <el-col :span="3">
                    <el-link type="primary" @click="show('companyBusiness')">公司业务</el-link>
                </el-col>
                <el-col :span="3">
                    <el-link type="primary" @click="show('Csr')">CSR</el-link>
                </el-col>
                <el-col :span="3">
                    <el-link type="primary">我们的客户</el-link>
                </el-col>
                <el-col :span="3">
                    <!-- <el-link type="primary">日本语</el-link> -->
                    <el-button type="primary" plain style="width: 100px;">日本语</el-button>
                </el-col>
                <el-col :span="3">
                    <el-image :src="require('@/assets/icon/phone.jpg')"
                        style="display: flex; height: 20px ;width: 20px; padding-left: 20px;">
                    </el-image>
                </el-col>
                <el-col :span="6" style="width: 300px;">
                    <el-link type="primary" style="padding-top: 0px; display: flex;">主要链接</el-link>
                </el-col>
            </el-row>
        </div>
        <div class="banner clearfix">
            <div @click="prevSlide" class="carousel-prev-icon-left">

            </div>
            <div class="carousel-slides">
                <img v-for="(image, index) in images" :key="index" :src="image"
                    :style="{ left: index * 100 + '%', 'transform': dynamicstyle }" />
            </div>
            <div @click="nextSlide" class="carousel-prev-icon-right"></div>
        </div>
        <div class="index-quality">
            <keep-alive>
                <!-- 占位符 控制显示的东西，必须加is 不然会报错 -->
                <component :is="isshow"></component>
            </keep-alive>
                <!-- <div class="title" style="padding-top: 50px; text-align: center; width: 100%;">
                    <span style="font-size: 40px;">业务/</span>
                    <span style="text-transform: uppercase;color: #999; font-size: 36px;">Business</span>
                </div> -->
                <!-- 中间三个盒子在一起，点击跳转，看看有没有这样的布局 -->
                <!-- <div style="height: 400px;">
                    <el-row style="height: 400px; display: flex; padding-left: 300px ">
                        <el-col :span="6" style="border: solid;">
                            <div class="grid-content bg-purple" style="height: 300px; width: 300px;">
                                <img :src="require('@/assets/icon/personManager.png')" class="imgCss">
                                <span class="spanCss">人力管理管理</span>
                                <van-icon class="iconfont icon-quanquanxiangyoujiantou" class-prefix="icon"
                                    name="icon-quanquanxiangyoujiantou" style="display: flex;padding: 10px 135px;">
                                </van-icon>
                            </div>
                        </el-col>
                        <el-col :span="6" style="border: solid;">
                            <div class="grid-content bg-purple-dark">
                                <div class="grid-content bg-purple" style="height: 300px; width: 300px;">
                                    <img :src="require('@/assets/icon/idIcon.png')" class="imgCss" />
                                    <span style="display: flex; padding: 0 118px;">企业培训</span>
                                    <van-icon class="iconfont icon-quanquanxiangyoujiantou" class-prefix="icon"
                                        name="icon-quanquanxiangyoujiantou" style="display: flex;padding: 10px 135px;">
                                    </van-icon>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6" style="border: solid;">
                            <div class="grid-content bg-purple-light">
                                <div class="grid-content bg-purple" style="height: 300px; width: 300px;">
                                    <img :src="require('@/assets/icon/personManager.png')" class="imgCss" />
                                    <span style="display: flex;padding: 0 66px;">外资在华事务所代理</span>
                                    <van-icon class="iconfont icon-quanquanxiangyoujiantou" class-prefix="icon"
                                        name="icon-quanquanxiangyoujiantou" style="display: flex;padding: 10px 135px;">
                                    </van-icon>
                                </div>


                            </div>
                        </el-col>
                    </el-row>
                </div> -->
        </div>
        <div class="index-about">
            <!-- 横幅标题已经做好 -->
            <div class="title" style="padding-top: 50px; text-align: center; width: 100%;">
                <span style="font-size: 40px;">关于/</span>
                <span style="text-transform: uppercase;color: #999; font-size: 36px;">About</span>
            </div>
            <!-- 下面的就是图片以及文字的排版 -->
            <div style="display: flex;">
                <img :src="require('@/assets/img/education.jpg')" class="eduImgCss" />
                <div style="padding: 50px; 300px height: 100px;width: 500px; text-align: left;">
                    <!-- <h6 style="padding: 46px; font-size: 18px;">上海爱施特信息咨询有限公司</h6> -->
                    <div
                        style="display: flex; padding: 0px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 18px;">
                        上海爱施特信息咨询有限公司</div>
                    <div style="display: flex; text-align: left;height: 100px;padding-top: 65px;width: 560px;">上 海 爱 施 特 信 息
                        咨 询 有 限 公 司 创 立 于 2 0 0 0 年 。
                        二 十 一 年 来 ， 致 力 于 人 力 资 源 管 理 、 企 业 培 训 、 管 理 咨 询 等 全 方 面 的 咨 询 服 务 ， 为 企 业 提 供 有 效 解 决 方 案 及 管 理 的
                        落 实 。</div>
                    <div style="display: flex;text-align: left;height: 100px; padding-top: 65px; width: 560px;">我 们 爱 施 特 通
                        过 华 二 国 际 部 研 学 、 日 本 禅 之 行 、 日 本 百 年 老 店 研 学 、 关 西 防 灾 研 学 等 一 系 列 的 国 际 交 流 活 动 ， 发 展
                        中 日 友 好 关 系 ， 促 进 国 际 合 作 ， 切 实 履 行 着 我 们 的 社 会 责 任 。</div>
                </div>
            </div>
        </div>
        <div class="index-partner">
            <el-row type="flex" class="row-bg" justify="center" :gutter="20">
                <el-col style=" width: 300px; height: 132px; " :span="3">
                    <div style="display: flex;padding: 25px 100px;">
                        我们的客户
                    </div>
                    <div style="display: flex;padding: 0px 100px;">
                        PARTNERS
                    </div>
                </el-col>
                <div>
                    <img :src="require('@/assets/icon/verticalLine.png')" class="verticalLine" />
                </div>
                <!-- <el-col :span="1">
                    <el-divider direction="vertical"></el-divider>
                </el-col> -->
                <el-col :span="3">
                    <div style="width: 900px; height: 132px;display: flex;">
                        <div style="width: 900px; height: 132px;">
                            bb1
                        </div>
                    </div>
                </el-col>
                <el-col>
                    <div>
                        <img :src="require('@/assets/icon/verticalLine.png')" style="height: 100px;
    width: 16px; " />
                    </div>
                </el-col>
                <el-col :span="3">
                    cc
                </el-col>
            </el-row>
        </div>
        <!-- <ul class="sidebar">

        </ul> -->
        <div class="footer" style="margin: 5px;background-color: #999;">
            <div style="display: flex;">
                <div style="width: 50%; height: 300px; padding-top: 58px;padding-left: 200px;display: flex;">
                    <div style="width: 100px;">
                        关于我们
                    </div>
                    <div style="width: 150px;">
                        <p style="margin-top:0 ;">公司业务</p>
                        <div style="padding-top: 10px;">
                            人力资源管理
                        </div>
                        <div style="padding-top: 10px;">
                            企业培训
                        </div>
                        <div style="padding-top: 10px;">
                            外资在华事务所代理
                        </div>
                    </div>
                    <div style="width: 100px;">
                        CSR
                    </div>
                    <div style="width: 150px;">
                        <p style="margin-top: 0;">
                            联系我们
                        </p>
                        <div style="padding-top: 10px;">
                            招聘方式
                        </div>
                        <div style="padding-top: 10px;">
                            联系方式
                        </div>
                    </div>
                </div>
                <div style="width: 50%;height: 300px;padding-top: 50px;padding-right: 200px; display: flex;">
                    <div style="text-align: center;align-items: center;padding-top: 56px;width: 50%;">
                        <div style="padding: 5px;">
                            电话 ： xxx-xxxxxxx
                        </div>
                        <div style="padding: 5px;">
                            邮箱 ： 1908829426@qq.com
                        </div>
                    </div>
                    <div style="display:flex ; width: 50px;">
                        <div>
                            <img :src="require('@/assets/qrcode/qrcode1.png')"
                                style="height: 115px;width: 115px;padding-left: 20px;padding-top: 25px;padding-bottom: 10px;" />
                        </div>
                        <div>
                            <img :src="require('@/assets/qrcode/qrcode2.png')"
                                style="height: 115px;width: 115px; padding-left: 20px;padding-top: 25px;padding-bottom: 10px;" />
                        </div>
                        <div>
                            <img :src="require('@/assets/qrcode/qrcode3.png')"
                                style="height: 115px;width: 115px;padding-left: 20px;padding-top: 25px;padding-bottom: 10px;" />
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 30px; width: 100%;text-align: center;align-items: center;">Copyright © 2011-
                http://www.est-group.com/. 上海爱施特信息咨询有限公司版权所有 沪ICP备2020028632号-1</div>
        </div>

    </div>
</template>

<script>
import Index from '@/views/Index.vue'
import About from "@/views/About.vue"
import companyBusiness from "@/views/companyBusiness.vue"

import Csr from '@/views/Csr.vue'
export default {
    name: "Home",
    components: {
        Index,
        About,
        companyBusiness,
        Csr
    },
    data() {
        return {
            images: [
                require('@/assets/img/101.png'),
                require('@/assets/img/102.jpg'),
                require('@/assets/img/103.jpg')
                //   './assets/101.png',
                //   './src/assets/102.jpg',
                //   './src/assets/103.jpg',
            ],
            dynamicstyle: "", //动态样式
            currentSlide: 0, //播放序号
            interval: Object,
            isshow: 'Index'
        }
    },
    mounted() {
        // 自动播放动画
        this.startSlideshow()
    },
    methods: {
        nextSlide() {
            // 每次指针加一
            this.currentSlide = (this.currentSlide + 1) % this.images.length
            this.setStyle();
        },
        prevSlide() {
            // 每次减一，为负数时循环
            this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
            this.setStyle();
        },
        // 图片动画
        setStyle() {
            this.dynamicstyle = `translatex(-${this.currentSlide * 100}%)`
        },
        // 定时器
        startSlideshow() {
            this.interval = setInterval(() => {
                this.currentSlide = (this.currentSlide + 1) % this.images.length;
                this.setStyle();
            }, 3000)
        },
        stopSlideshow() {
            clearInterval(this.interval)
        },
        show(name) {
            this.isshow = name
        }

    }


}

</script>

<style scoped>
.header {
    height: 100px;
    width: 100%;
    margin: 0;
    /* box-sizing: border-box; */
    /* display: flex; */
    /* position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); */

}

.banner clearfix {
    height: 450px;
    /* width: 100%; */
    position: relative;

}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.carousel-slides img {
    display: inline-block;
    position: absolute;
    width: inherit;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    height: 100%;
    transition: 0.5s transform ease-in-out;
}

.carousel-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.carousel-prev-icon-left {
    position: absolute;
    left: 10px;
    top: 55px;
    height: 500px;
    width: 80px;
    border: none;
    background-image: url("../assets/icon/prev.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 999;
}

.carousel-prev-icon-right {
    position: absolute;
    right: 10px;
    top: 55px;
    height: 500px;
    width: 80px;
    border: none;
    background-image: url("../assets/icon/next.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 999;
}

.index-quality {
    /* padding: 20px; */
    height: auto;
    width: 100%;
}

.index-about {
    height: 572px;
    background-color: #99a9bf;
}

.index-partner {
    height: 132px;
    /* display: flex; */
    margin-top: 25px;
}

.verticalLine {
    height: 100px;
    width: 16px;

}

/* .sidebar {
    position: fixed;
    right: 0;
    top: 300px;
    z-index: 3;
} */
.el-divider {
    height: 60px;
    width: 60px;
}

.footer {
    height: 400px;

}

.el-row {
    height: 100px;
    display: flex;
    margin: 0 !important;
    padding: 0;
    text-align: center;
    align-items: center;
}

.el-image__inner {
    height: 100px !important;
    width: 180px !important;
    padding-left: 200px !important;
    ;

}

.row-bg {
    padding: 0 0;
    margin: 0;
    height: 100px;
    padding: 0;
}


.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.imgCss {
    height: 150px;
    width: 150px;
    padding-top: 20px;
    padding: 45px 76px;
}

.spanCss {
    display: flex;
    height: 20px;
    padding: 0 100px;

}

.iconfont icon-quanquanxiangyoujiantou {
    padding-top: 10px !important;
}

.eduImgCss {
    height: 361px;
    width: 600px;
    padding-top: 20px;
    padding: 46px 76px;
}
</style> 